<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理员界面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            font-family: 'Times New Roman', serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ff 100%);
            display: flex;
            min-height: 100vh;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            width: 250px;
            background: linear-gradient(180deg, #2b4570 0%, #1a2a43 100%);
            position: fixed;
            height: 100vh;
            color: white;
            padding-top: 20px;
            box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .sidebar .header {
            text-align: center;
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .sidebar .menu {
            padding: 20px;
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 15px;
            color: white;
            text-decoration: none;
            transition: 0.3s;
            border-radius: 8px;
            margin-bottom: 5px;
        }
        
        .menu-item:hover, .menu-item.active {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .menu-item i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        /* 主要内容区域 */
        .main-content {
            margin-left: 250px;
            padding: 30px;
            width: calc(100% - 250px);
        }
        
        .content-section {
            display: none;
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .content-section.active {
            display: block;
        }
        
        /* 请假申请列表样式 */
        .applications-list {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: white;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .applications-list th {
            background: #f8f9fa;
            padding: 15px;
            text-align: left;
            color: #2c3e50;
            font-weight: 600;
            border-bottom: 2px solid #eef0f7;
        }
        
        .applications-list td {
            padding: 15px;
            border-bottom: 1px solid #eef0f7;
        }
        
        /* 状态标签样式 */
        .status-pending {
            color: #e6a23c;
        }
        
        .status-approved {
            color: #67c23a;
        }
        
        .status-rejected {
            color: #f56c6c;
        }
        
        /* 审核弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        
        .modal-content {
            position: relative;
            background: white;
            width: 500px;
            margin: 100px auto;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #2c3e50;
            font-weight: 500;
        }
        
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            resize: vertical;
            min-height: 100px;
        }
        
        .buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }
        
        .buttons button {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.3s;
        }
        
        .back-btn {
            background: #f3f4f6;
            color: #2c3e50;
        }
        
        .submit-btn {
            background: #4a90e2;
            color: white;
        }
        
        .reject-btn {
            background: #f56c6c;
            color: white;
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="header">
            <h2><i class="fas fa-hospital-user"></i> 管理员界面</h2>
<!--            <p th:text="${user != null ? user.realName : '未知用户'}">医生姓名</p>-->
        </div>
        <div class="menu">
<!--            <a href="#" class="menu-item active" onclick="showContent('pending-applications')">-->
<!--                <i class="fas fa-clipboard-list"></i>-->
<!--                待审核申请-->
<!--            </a>-->
            <a href="#" class="menu-item" onclick="showContent('processed-applications')">
                <i class="fas fa-history"></i>
                学生上报情况
            </a>
            <a href="/logout" class="menu-item">
                <i class="fas fa-sign-out-alt"></i>
                退出登录
            </a>
        </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 待审核申请 -->
        <div id="pending-applications" class="content-section active">
            <h2><i class="fas fa-clipboard-list"></i> 待审核申请</h2>
            <table class="applications-list">
                <thead>
                    <tr>
                        <th>申请时间</th>
                        <th>学生姓名</th>
                        <th>请假类型</th>
                        <th>体温</th>
                        <th>请假原因</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="app : ${pendingApplications}">
                        <td th:text="${#temporals.format(app.createTime, 'yyyy-MM-dd HH:mm')}">2024-01-17 10:30</td>
                        <td th:text="${app.studentName}">张三</td>
                        <td>
                            <i class="fas fa-heartbeat" th:if="${app.leaveType == 'SICK'}"></i>
                            <i class="fas fa-user-clock" th:if="${app.leaveType == 'PERSONAL'}"></i>
                            <span th:text="${app.leaveType == 'SICK' ? '病假' : '事假'}">病假</span>
                        </td>
                        <td th:text="${app.temperature != null ? app.temperature + '℃' : '-'}">37.5℃</td>
                        <td th:text="${app.description}">发烧感冒</td>
                        <td>
                            <button onclick="openReviewModal(this)" 
                                    th:data-id="${app.id}"
                                    class="submit-btn">
                                <i class="fas fa-check-circle"></i> 审核
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 学生上报情况 -->
        <div id="processed-applications" class="content-section">
            <h2><i class="fas fa-history"></i> 学生上报情况</h2>
            <table class="applications-list">
                <thead>
                    <tr>
                        <th>申请时间</th>
                        <th>学生姓名</th>
<!--                        <th>请假类型</th>-->
                        <th>体温</th>
                        <th>特殊情况</th>
<!--                        <th>审核结果</th>-->
<!--                        <th>审核意见</th>-->
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="app : ${processedApplications}">
                        <td th:text="${#temporals.format(app.createTime, 'yyyy-MM-dd HH:mm')}">2024-01-17 10:30</td>
                        <td th:text="${app.studentName}">张三</td>
<!--                        <td>-->
<!--                            <i class="fas fa-heartbeat" th:if="${app.leaveType == 'SICK'}"></i>-->
<!--                            <i class="fas fa-user-clock" th:if="${app.leaveType == 'PERSONAL'}"></i>-->
<!--                            <span th:text="${app.leaveType == 'SICK' ? '病假' : '事假'}">病假</span>-->
<!--                        </td>-->
                        <td th:text="${app.temperature != null ? app.temperature + '℃' : '-'}">37.5℃</td>
<!--                        <td th:text="${app.description}">发烧感冒</td>-->
<!--                        <td>-->
<!--                            <span th:class="${app.doctorStatus == 'APPROVED' ? 'status-approved' : 'status-rejected'}">-->
<!--                                <i th:class="${app.doctorStatus == 'APPROVED' ? 'fas fa-check' : 'fas fa-times'}"></i>-->
<!--                                <span th:text="${app.doctorStatus == 'APPROVED' ? '需要请假' : '不需要请假'}">需要请假</span>-->
<!--                            </span>-->
<!--                        </td>-->
                        <td th:text="${app.doctorComment}">建议休息</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 审核弹窗 -->
    <div id="reviewModal" class="modal">
        <div class="modal-content">
            <h2><i class="fas fa-clipboard-check"></i> 审核请假申请</h2>
            <form id="reviewForm" onsubmit="submitReview(event)">
                <div class="form-group">
                    <label for="result">审核结果：</label>
                    <select id="result" name="result" required>
                        <option value="APPROVED">需要请假</option>
                        <option value="REJECTED">不需要请假</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="comment">审核意见：</label>
                    <textarea id="comment" name="comment" required
                             placeholder="请输入审核意见或建议"></textarea>
                </div>
                
                <div class="buttons">
                    <button type="button" class="back-btn" onclick="closeModal()">取消</button>
                    <button type="submit" class="submit-btn">提交审核</button>
                </div>
            </form>
        </div>
    </div>
    
    <script>
        function showContent(contentId) {
            // 隐藏所有内容
            const sections = document.querySelectorAll('.content-section');
            sections.forEach(section => {
                section.classList.remove('active');
            });
            
            // 显示选中的内容
            const selectedContent = document.getElementById(contentId);
            if (selectedContent) {
                selectedContent.classList.add('active');
            }
            
            // 更新菜单项的激活状态
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach(item => {
                item.classList.remove('active');
            });
            const currentItem = document.querySelector(`.menu-item[onclick*="${contentId}"]`);
            if (currentItem) {
                currentItem.classList.add('active');
            }
        }
        
        function openReviewModal(button) {
            const modal = document.getElementById('reviewModal');
            const form = document.getElementById('reviewForm');
            
            if (button) {
                const applicationId = button.getAttribute('data-id');
                form.setAttribute('data-id', applicationId);
            }
            
            modal.style.display = 'block';
            document.body.style.overflow = 'hidden';
        }
        
        function closeModal() {
            const modal = document.getElementById('reviewModal');
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
            // 重置表单
            document.getElementById('reviewForm').reset();
        }
        
        function submitReview(event) {
            event.preventDefault();
            const form = event.target;
            const id = form.getAttribute('data-id');
            
            const formData = new FormData(form);
            
            fetch(`/doctor/review/${id}`, {
                method: 'POST',
                body: formData
            }).then(response => {
                if (response.ok) {
                    closeModal();
                    location.reload();
                } else {
                    alert('提交失败，请重试');
                }
            }).catch(error => {
                console.error('Error:', error);
                alert('提交失败，请重试');
            });
        }
    </script>
</body>
</html> 